body,html{
    width:100%;
    height:100%;
    background: #eeeeee;
}
.px2rem(@name,@px){
    @{name}:@px / 75 * 1rem;
}
.head{
    background: #ff5793;
    display: flex;
    justify-content: flex-start;
    .px2rem(height,80);
    img{
        .px2rem(width,15);
        .px2rem(height,30);
//     .px2rem(margin,20);  
       .px2rem(margin-top,25);
       .px2rem(margin-left,25);
    }
    .queren{
        .px2rem(font-size,36);
        margin-left: 82%;
        .px2rem(margin-top,15);
        color: white;
        
    }
}
.center{
    .px2rem(height,520);
     background: #eeeeee;
     .line{
         .px2rem(height,60);
         display:flex;
         justify-content: center;
         .px2rem(font-size,27);
          .px2rem(padding-top,80);
          color: #9b9b9b;
     }
     .graphical{
         .px2rem(height,120);
         display: flex;
         justify-content: center;
         justify-content:space-around;
         .px2rem(margin-top,110);
         dl{
            .px2rem(height,120);
           
              text-align: center;
            img{
                  .px2rem(height,60);
                    .px2rem(width,60);
            } 
              dd{
                  color: #b4b4b4;
                  .px2rem(line-height,60);
                  .px2rem(font-size,26);
                  
              }
         }
     }
     .other{
         .px2rem(height,36);
         .px2rem(font-size,27);
         text-align: center;
         .px2rem(margin-top,85);
          color: #b4b4b4;
         img{
            .px2rem(height,25);
            .px2rem(margin-left,15);
         }
     }
}
.from{
    .px2rem(height,110);
    background: white;
        .username{
            .px2rem(margin-left,15);
            .px2rem(margin-top,15);     
            .px2rem(height,90);
            dl{
                   display: flex;
                flex-wrap: wrap;
               dt img{
                    .px2rem(width,60);
                    .px2rem(height,60);
                    .px2rem(margin-top,15);
                }
                dd input{
                    
                    .px2rem(height,80);
                    .px2rem(width,600);
                    .px2rem(font-size,27);
                    border: 1px solid white;
                    .px2rem(margin-left,50);
//                  border-top: 1px solid #666666;
                     background: white;
                     .px2rem(margin-bottom,30);
                }
            }
        }
        .password{
            .px2rem(padding-left,15);
//          .px2rem(margin-top,80);     
            .px2rem(height,90);
            background: white;
            border-top: 1px solid black;
            dl{
                display: flex;
                flex-wrap: wrap;
               dt img{
                    .px2rem(width,60);
                    .px2rem(height,60);
                    .px2rem(margin-top,15);
                }
                dd input{
                    
                    .px2rem(height,80);
                    .px2rem(width,600);
                    .px2rem(font-size,27);
                    border: 1px solid white;
                    .px2rem(margin-left,50);
                    border-top: 1px solid #666666;
                     background: white;
                     .px2rem(margin-bottom,30);
                }
            }
        }
        .btn{
            .px2rem(height,100);
            .px2rem(width,700);
            .px2rem(margin-left,30);
            .px2rem(margin-top,50);
            .px2rem(font-size,40);
            color: white;
            background: #dd2b2b;
            border-radius: 8%;
        }
}
.foot{
    .px2rem(height,80);
    .px2rem(margin-top,280);
    .px2rem(font-size,30);
    dl{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;   
        .px2rem(margin-left,30); 
        color: #9a9a9a;
        dd{
            .px2rem(margin-left,300); 
        }
    }
    
}
